<template>
	<view>
		<!--楼栋显示-->
		<liuyuno-tabs :tabData="buildingList" @tabClick="buildClick" />
		<!--楼层显示-->
		<liuyuno-tabs :tabData="floorList" @tabClick="floorClick" />
		
		<!--每层宿舍信息显示-->
		<view class="classAttendanceWrap">
			<view
				:class="[item.status=='已点'?'classAttendence0':(item.status=='未点'?'classAttendence1':'classAttendence2')]"
				v-for="(item,index) in floorDorList" :key="index" @click="toAttendanceDetail(item)">
				<view class="classAttendenceFont">
					
					<view style="font-size:40rpx ;">{{item.dormitoryNo}}</view>
					<view v-if="item.status=='差'">
						<view v-if="item.absence!=0" style="letter-spacing: 5rpx;">
							缺勤{{item.absence}}人
						</view>
					</view>
					<view v-else>{{item.status}}</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import teachClass from "@/api/modules/teachClass.js"
	
	export default {
		onShow() {
			this.getEachLayerDormitoryAttendance();
		},
		mounted() {
			//获取楼栋和楼层
			teachClass.getDictByType("sys_building").then(res => {
				this.buildingList = [
				  ...res.data.map(item => {  
				    let obj = {};  
					obj.id = item.dictValue;
					obj.name = item.dictLabel;
				    return obj;  
				  })  
				];
				
				if(this.buildingList.length === 0) {
					return;
				}
				
				this.selectedBuildName = this.buildingList[0].name;
				this.selectedBuildNo = this.buildingList[0].id;
				
				teachClass.getDictByType("sys_storey").then(res => {
					this.floorList = [
					  ...res.data.map(item => {  
					    let obj = {};  
						obj.id = item.dictValue;
						obj.name = item.dictLabel;
					    return obj;  
					  })  
					];
					
					if(this.floorList.length === 0 ) {
						return;
					}
					this.selectedFloorName = this.floorList[0].name;
					this.selectedFloorNo = this.floorList[0].id;
					
					//根据楼栋和楼层获取宿舍信息
					this.getAppDorListByBuildAndFloor();
				})
			});
		},
		data() {
			return {
				buildingList: [],//楼栋tab
				floorList: [],//楼层tab
				selectedBuildName: '', //选中楼栋名称
				selectedFloorName: '', //选中楼层名称
				selectedBuildNo: '', //选中楼栋value
				selectedFloorNo: '', //选中楼层value
				floorDorList: [], //楼层对应宿舍信息
			}
		},
		methods: {
			//楼栋点击
			buildClick(index) {
				this.selectedBuildName = this.buildingList[index].name;
				this.selectedBuildNo = this.buildingList[index].id;
				this.getAppDorListByBuildAndFloor();
			},
			//楼层点击
			floorClick(index) {
				this.selectedFloorName = this.floorList[index].name;
				this.selectedFloorNo = this.floorList[index].id;
				this.getAppDorListByBuildAndFloor();
			},
			//根据楼栋和楼层获取宿舍信息
			getAppDorListByBuildAndFloor() {
				this.floorDorList = [];
				this.$api.dormitory.getAppDorListByStorey(this.selectedBuildName, this.selectedFloorName).then(res => {
					this.floorDorList=res.data;
					this.floorDorList.forEach((item, index) => {
						item.status = "未点"
					});
					console.log("宿舍信息：",this.floorDorList);
					//根据楼栋，楼层，获取当日每层宿舍考勤情况
					this.getEachLayerDormitoryAttendance();
				})
			},
			//根据楼栋，楼层，获取当日每层宿舍考勤情况
			getEachLayerDormitoryAttendance() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				
				console.log("进入：",this.selectedBuildNo, this.selectedFloorNo);
				this.$api.dormitory.listDorManualAttence(this.selectedBuildName, this.selectedFloorName, this.$date).then(res => {
					uni.hideLoading();
					if (res.data.length > 0) {
						const dataById = res.data.reduce((acc, item) => {
						  acc[item.bdormitoryId] = item; 
						  return acc;
						}, {});
						this.$forceUpdate();
						this.floorDorList = this.floorDorList.map(classItem => {
							const updatedItem = dataById[classItem.bdormitoryId];
							 
							if (updatedItem) {
								// 如果存在更新的项，则根据条件逻辑更新状态
								if (updatedItem.absence !== 0) {
								  return { ...updatedItem, status: "差" };
								} else if ((updatedItem.leaveCount + updatedItem.normal) === updatedItem.total) {
								  return { ...updatedItem, status: '已点' };
								} else if ((updatedItem.leaveCount + updatedItem.normal) < updatedItem.total && updatedItem.normal > 0) {
								  const newAbsence = updatedItem.total - (updatedItem.leaveCount + updatedItem.normal);
								  return { ...updatedItem, absence: newAbsence, status: newAbsence !== 0 ? "差" : "未知" };
								} else {
								  return { ...updatedItem, status: "未点" };
								}
							} else {
								// 如果没有找到匹配的项，则使用原始项
								return classItem;
							}
						});
					} 
					this.$forceUpdate();
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})
				console.log("进入宿舍考勤信息：",this.floorDorList);
			},
			//进入宿舍考勤详情页面
			toAttendanceDetail(item) {
				uni.navigateTo({
					url: `/pages_duty/dormitoryTeacher/dormitoryAttendance/dormitoryAttendanceDetail?dormitoryId=${item.bdormitoryId}`
				})
			}
		}
	}
</script>

<style>
.classAttendenceFont {
		color: white;
		text-align: center;
		margin-top: 40rpx;

	}

	.classAttendanceWrap {
		width: 700rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}

	.classAttendence0 {
		width: 23%;
		height: 160rpx;
		background-image: url("https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/001.png");
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 160rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/004.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.classAttendence2 {
		width: 23%;
		height: 160rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-010.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}
</style>
